<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/common.css">
<!--    <link rel="stylesheet" href="../../css/swiper.min.css">-->
    <link rel="stylesheet" href="../../css/style.css">
    <style>
        .j08_center_bar{
            width: 672px;
            height: 850px;
            position: relative;
            overflow: hidden;
            /*background: black;*/

        }

        .j08_big_bar{
            width: 352px;
            height: 782px;
            background-image: url("08_big_bar.png");
            background-size: 100%;
            position: absolute;
            top: 50px;
            left: 50%;
            margin-left: -176px;
            animation: big 2s 0s ease forwards;
        }
        .j08_small_bar{
            width: 159px;
            height: 381px;
            position: absolute;
        }
        .j08_small_bar img{
            width: 100%;
        }
        .j08_small_bar:nth-child(1){
            left: 0;
            top: 650px;
            opacity: 0;
            animation: small1 2s 0s ease forwards;
        }
        .j08_small_bar:nth-child(2){
            left: 171px;
            top: 704px;
            opacity: 0;
            animation: small2 1.8s 1s ease forwards;
        }
        .j08_small_bar:nth-child(3){
            right: 171px;
            top: 704px;
            opacity: 0;
            animation: small2 1.5s 500ms ease forwards;
        }
        .j08_small_bar:nth-child(4){
            right: 0;
            top: 650px;
            opacity: 0;
            animation: small1 1.8s 1s ease forwards;
        }
        .j08_small_bar:nth-child(1) img{
            animation: opacity 3s 2s linear infinite alternate;
        }
        .j08_small_bar:nth-child(2) img{
            animation: opacity 3s 4s linear infinite alternate;
        }
        .j08_small_bar:nth-child(3) img{
            animation: opacity 3s 1s linear infinite alternate;
        }
        .j08_small_bar:nth-child(4) img{
            animation: opacity 3s 3s linear infinite alternate;
        }



        @keyframes opacity {
            from{
                opacity: 1;
            }
            to {
                opacity: 0.5;

            }
        }
        @keyframes big {
            from{
                top: 450px;
                opacity: 0;
            }
            to {
                top: 50px;
                opacity: 1;
            }
        }
        @keyframes small1 {
            from{
                top: 650px;
                opacity: 0;
            }
            to {
                top: 370px;
                opacity: 1;
            }
        }
        @keyframes small2 {
            from{
                top: 704px;
                opacity: 0;
            }
            to {
                top: 424px;
                opacity: 1;
            }
        }
        .position_box {
            position: absolute;
            text-align: center;
            width: 100%;
        }
        .num_box {
            top: -12px;
            line-height: 38px;
            font-size: 38px;
            color: #03f6ff;
        }
        .big_num_box {
            font-size: 43px;
            line-height: 43px;
            color: #f0ec37;
            margin-bottom: 14px;
        }
        .word_box {
            font-size: 34px;
            line-height: 34px;
            color: #ffffff;
        }
        .big_box {
            top: -42px;
        }
        .num_box_word {
            margin-top: 47px;
            font-size: 17px;
            line-height: 17px;
            color: #ffffff;
            padding: 0 30px;
        }
        .big_box_word {
            padding: 0 71px;
            margin-top: 119px;
            font-size: 17px;
            line-height: 17px;
            color: #ffffff;

        }
    </style>
</head>
<body style="overflow: hidden">
<div class="j08_center_bar">
    <div class="j08_big_bar">
        <div class="position_box big_box">
            <div class="big_num_box"></div>
            <div class="word_box">资产总数</div>
            <div class="big_box_word"></div>
        </div>
    </div>
    <div>
    <div class="j08_small_bar">
        <img src="08_small_bar.png" alt="">
        <div class="num_box position_box">
        </div>
    </div>
    <div class="j08_small_bar">
        <img src="08_small_bar.png" alt="">
        <div class="num_box position_box">
        </div>
    </div>
    <div class="j08_small_bar">
        <img src="08_small_bar.png" alt="">
        <div class="num_box position_box">
        </div>
    </div>
    <div class="j08_small_bar">
        <img src="08_small_bar.png" alt="">
        <div class="num_box position_box">
        </div>
    </div>
    </div>
</div>

</body>
<script type="text/javascript" charset="utf-8" src="../../js/jquery-3.1.1.min.js"></script>
<!--<script type="text/javascript" charset="utf-8" src="../../js/swiper.min.js"></script>-->
<script type="text/javascript" charset="utf-8" src="../../js/common.js"></script>
<script>
$(function () {
    let param = {}
    let arr = []
    getJson('api/WEB-SQL/websql/openInterface/shp?categoryNo=ZCTS&limit=1', param, function (data) {
        arr = data.data
        // console.log(arr)
        let num = 0
        let word = ''
        for (let i = 0; i < arr.length; i++) {
            $('.num_box').eq(i).append(`<div>${arr[i].qty}</div><div class="num_box_word">${arr[i].type}</div>`)
            num += Number(arr[i].qty)
            word = arr.map(item=>item.type).join('+')
        }
        $('.big_num_box').html(num)
        $('.big_box_word').html(word)
    })
})
</script>
</html>
